<template>
  <div class="first mr-2">
    <div class="flex align-center justify-center">
      <div class="item-title flex align-center justify-center">企业类型</div>
    </div>
    <div id="company-chart01"></div>
  </div>
</template>
<script>
var echarts = require("echarts");
import searchApi from '@/api/search/index'
export default {
  name: "searchFirst",
  data() {
    return {
      colorList: [
        '#5757a5', '#602d53', '#fa2f06',
        '#51cf66', '#eaa76d', '#ed6fa4',
        '#79d224', '#7069a1', '#64bf1d',
        '#031523', '#044e38', '#7fce1e',
        '#30bb16', '#78c218', '#1e6e83',
        '#8bad05', '#93db3e', '#4765a4',
        '#5397b0', '#eb6b6b', '#37337f',
        '#2a508f', '#53d15f', '#9d91a4',
        '#44aeb8', '#e1a10c', '#8d809b',
        '#eab728', '#1a9244', '#e52e07'
      ],
      firstData: [
        {
          value: 20,
          name: "贸易",
          ratio: "20%",
        },
        {
          value: 26,
          name: "洗配煤",
          ratio: "26%",
        },
        {
          value: 8,
          name: "煤矿",
          ratio: "8%",
        },
        {
          value: 5,
          name: "非煤矿",
          ratio: "5%",
        },
        {
          value: 7,
          name: "发运",
          ratio: "7%",
        },
        {
          value: 2,
          name: "铁矿",
          ratio: "2%",
        },
        {
          value: 20,
          name: "石料",
          ratio: "20%",
        }
      ],
      dataOneInfo:{},
      dataOneList:{},
      time:''
    };
  }, 
  methods: {
    dataOne() {
      let that = this;
      searchApi
        .dataOne({
          time: this.time, 
        })
        .then(function (res) {
          if (res.code == 200) {
            res = res.data || []; 
            that.firstData = res
            that.$nextTick(() => {
              that.draw();
            });
            
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    mounted(){
      this.dataOne()
    },
    draw() {
      let that = this;
      var drawFirstCharts = document.getElementById("company-chart01"); // 对应地使用ByClassName
      var drawFirstChart = echarts.init(drawFirstCharts);
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}户 ({d}%)",
        },
        legend: {
          itemWidth: that.getRealPX(15),
          itemHeight: that.getRealPX(15),
          orient: "vertical", //纵向图例
          left: "center", 
          icon: "circle",
          top: "70%",
          nameLocation:'end',//坐标轴名称显示位置。
          itemGap: that.getRealPX(5), //图例item间距
          textStyle: {
            color: "#ffffff",
            fontSize: that.getRealPX(9),  
          },
          data: that.firstData,
          formatter: function (name) {
            //图表名称+数值
            if (that.firstData && that.firstData.length) {
              for (var index = 0; index < that.firstData.length; index++) {
                if (name === that.firstData[index].name) {
                  return name + ":" + that.firstData[index].value;
                }
              }
            }
          },
        },
        series: [
          {
            name: "企业类型",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "35%"],
            // roseType: "radius",
            label: {
              normal: {
                show: true,
                position: "inner",
                formatter: function (params) {
                  return params.name + "\n" + params.percent + "%";
                },
                textStyle: {
                  fontWeight: "600",
                  fontSize: that.getRealPX(12),
                  color: "#fff",
                },
              },
            },
            labelLine: {
              length: 1,
              length2: 20,
              smooth: true,
            },
            data: that.firstData,
          },
        ],
      };
      drawFirstChart.setOption(option);
    },
  }, 
};
</script>
<style lang="stylus" scoped>
#company-chart01 {
    width: 403px;
    height: 390px; 
  }
.first {
  width: 403px;
  height: 435px;
  background: url('../../../assets/img/search/bg01.png');
  background-size: 403px 435px;
 
  #company-chart01 {
    width: 403px;
    height: 390px; 
  }

  .item-title {
    width: 264px;
    height: 40px;
    background: url('../../../assets/img/search/item01.png');
    background-size: 264px 40px;
    margin-top: 6px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #DEF1FF;
  }
}
</style>
